<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item prop="code" label="项目编号">
        <el-input v-model="listQuery.code" placeholder="项目编号" />
      </el-form-item>
      <el-form-item prop="name" label="项目名称">
        <el-input v-model="listQuery.name" placeholder="项目名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="Search" @click="handleFilter">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="app-container">
      <el-table v-loading="listLoading"
                :data="projectTwoList"
                border
                fit
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%;margin-bottom: 20px"
                @expand-change="handleExpandChange">
        <el-table-column align="center" type="index" label="序号" width="60px" />
        <el-table-column align="center" label="二级项目编码" prop="code" min-width="155px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.code }}</template>
        </el-table-column>
        <el-table-column align="center" label="二级项目名称" prop="name" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.name }}</template>
        </el-table-column>
        <el-table-column align="center" label="项目编号" prop="code" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.code }}</template>
        </el-table-column>
        <el-table-column align="center" label="起始年度" prop="startTime" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.startTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="终止年度" prop="endTime" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.endTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="最后修改时间" width="180px" prop="updateTime">
          <template v-slot="{row}">{{ row.updateTime }}</template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template v-slot="{row}">
            <el-button text type="primary" @click="openProjectModel(row)">查看政府采购</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" class="pagination-model" />
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="政府采购" width="70%" top="2vh">
    <div class="details-info">
      <el-table :data="purchases"
                border
                fit
                tooltip-effect="dark"
                style="width: 100%;margin-bottom: 20px"
                @expand-change="handleExpandChange">
        <el-table-column align="center" type="index" label="序号" width="60px" />
        <el-table-column align="center" label="采购项目名称" prop="purchaseItem" />
        <el-table-column align="center" label="采购品目" prop="purchaseKind" />
        <el-table-column align="center" label="单位" prop="purchasePrice" />
        <el-table-column align="center" label="数量" prop="purchaseNum" />
        <el-table-column align="center" label="采购预算总金额" prop="purchasePrice">
          <template v-slot="{row}">{{ parseInt(row.purchasePrice) * parseInt(row.purchaseNum) }}</template>
        </el-table-column>
        <el-table-column align="center" label="拟计划采购日期" prop="purchaseDate" />
        <el-table-column align="center" label="专项资金名称" prop="aaa" />
        <el-table-column align="center" label="资金来源" prop="aaa" />
      </el-table>
    </div>
    <div style="text-align:right;">
      <el-button type="info" icon="Close" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {doGet} from "@/config/http";
import {getListPageSize, svc} from "@/config/common"
import initListStore from '@/store/modules/initList'

const props = defineProps({
  radioNum: {
    required: false,
    type: String,
  }
})
let projectTwoList = ref([])
let listLoading = ref(true)
let total = ref(0)
let purchases = ref([])
// 单位列表
let governmentList = initListStore().governmentList
// 主管部门
let organizationList = initListStore().organizationList
let dialogVisible = ref(false)
let listQuery = ref({
  pageNum: 1,
  pageSize: 10,
  sortField: 'id',
  sortType: 'desc',
  projectTwoId: null,
  name: null,
  viability: null,
  source: null,
  attribute: null,
  totalFund: null,
  putinFund: null,
  currFund: null,
  useGovId: null,
  applyGovId: null,
  previousArrange: null,
  managerOrgId: null,
  managerName: null,
  managerUserContact: null,
  workGovId: null,
  workUserId: null,
  workUserContact: null,
  state: null,
  startTime: null,
  endTime: null,
  isDebenture: null,
  isScientific: null,
  isConstruction: null,
  constructionDesc: null,
  isAgent: null,
  agentGovId: null,
  isGovernmentPurchase: null,
  purchaseProject: null,
  purchaseKind: null,
  purchaseRequire: null,
  purchaseDateStart: null,
  purchaseDateEnd: null,
  purchaseAttr: null,
  purchaseFund: null,
  purchasePrice: null,
  purchaseNum: null,
  purchaseUnit: null,
  createTimeStart: null,
  createTimeEnd: null,
  updateTimeStart: null,
  updateTimeEnd: null,
})
const emit = defineEmits(['openProjectKpi'])

// 获取下拉框数据列表
// async function initList() {
//   let p1 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
//   let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1, p2])
//   // 单位列表
//   governmentList.value = resArray[0]['records']
//   // 主管部门
//   organizationList.value = resArray[1]['records']
// }

onMounted(async () => {
  await getList()
  // await initList()
})

// 获取数据
async function getList() {
  listLoading.value = true
  let res = await doGet(svc, '/budget-two/page', listQuery.value)
  listLoading.value = false
  total.value = parseInt(res['total'])
  projectTwoList.value = res['records']
}

// 查询
async function handleFilter() {
  listQuery.value['pageNum'] = 1
  await getList()
}
async function openProjectModel(row) {
    let p1 = doGet(svc, '/budget-two-purchase/listByField', {field: 'budgetTwoId', values: row.id}, false)
    let resArray = await Promise.all([p1])
    purchases.value = resArray[0]
    dialogVisible.value = true
}
// async function handleExpandChange(row,expandedRows) {
//   console.log('expandedRows',expandedRows)
//   if (expandedRows.length > 0) {
//     console.log('row------------',row)

//     console.log('purchases.value',purchases.value)
//   }
// }
</script>
<style>
.selectItems .el-radio__input.is-checked .el-radio__inner {
  border-color: #6222c2 !important;
    /* background: #6222c2 !important; */
}
.el-radio.is-bordered.is-checked{
    /* background: #6222c2; */
}
.report-form-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-list-btn {
  display: flex;
  /* display: flex; */
  align-items: center;
  justify-content: space-between
}
.report-form-list-content .el-form-item__label {
  width: 220px !important;
}
.el-form-item__label {
  width: 220px !important;
}
.report-form-list-content {
  display: flex;
  flex-wrap: wrap;
}
.details-info {
  padding: 20px;
}
.form-label {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
  /* font-size: var(--el-form-label-font-size); */
  font-size: 16px;
  /* color: var(--el-text-color-regular); */
  color: #337ecc;
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 200px;
  font-weight: bold;
}
.update-log {
  width: 100%;
  margin-bottom: 30px;
}
.update-log-1 {
  margin-top: 0;
}
.select-list {
  width: 100%;
  margin: 30px 0;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.select-list .el-radio-group {
  margin-right: 30px;
}
.select-list .el-button {
  margin-left: 30px;
}
.add-indexs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-demo {
  margin-right: 20px;
}
.file-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.file-list-btns {
  display: flex;
  align-items: center;
}
.file-list-btn-span {
  color: #F56C6C;
  font-size: 12px;
}
.data-item {
  width: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 10px 0;
  font-size: 16px;
}
.data-item-1 {
  width: 100%;
  align-items:flex-start
}

.data-item label {
  width: 200px;
  text-align: right;
}
.data-item span {
  padding-left: 15px;
  display: inline-block;
  width: 75%;
}
</style>
